<template>
  <div class="payslip-detail">
    <a-row type="flex">
      <a-col>
        <a-button icon="left" type="link" @click="goBack">返回</a-button>
      </a-col>
      <a-col class="full ta-center fs16">
        <strong>{{ tabs.name }}</strong>
      </a-col>
    </a-row>
    <a-row class="salary" type="flex" align="middle" justify="space-between">
      <a-col class="item" :span="10">
        <a-row ref="box" type="flex" align="middle" justify="space-between" @click.native="getItem">
          <a-col :span="7">
            <a-row>
              <strong class="primary">总共</strong>
            </a-row>
            <a-row class="primary">
              <a-statistic :value="tabs.numAll || 0">
                <template #suffix>人</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.companySocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="7">
            <a-row>
              <strong class="sub_tit">公司公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.companyPfAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="8">
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="10">
            <a-row>
              <strong class="sub_tit">个人社保合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalSocAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
          <a-divider style="height:42px" type="vertical" />
          <a-col :span="10">
            <a-row class="ove">
              <strong class="sub_tit">个人公积金合计</strong>
            </a-row>
            <a-row>
              <a-statistic :precision="2" :value="tabs.personalPfAmount || 0">
                <template #prefix>￥</template>
              </a-statistic>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="item" :span="4">
        <a-row>
          <strong class="sub_tit">总合计预缴金额</strong>
        </a-row>
        <a-row>
          <a-statistic :precision="2" :value="tabs.allAmount || 0">
            <template #prefix>￥</template>
          </a-statistic>
        </a-row>
      </a-col>
    </a-row>
    <a-row class="top">
      <a-tabs :default-active-key="defaultKey" @change="changeTab">
        <a-tab-pane key="all" :tab="`总派单${tabs.numAll || 0}人`" />
        <a-tab-pane :key="1" :tab="`已完成${tabs.numHasFinish || 0}人`" />
        <a-tab-pane :key="0" :tab="`未完成${tabs.numNotFinish || 0}人`" />
        <a-tab-pane :key="2" :tab="`异常${tabs.numError || 0}人`" />
      </a-tabs>
      <a-button class="pos">查看统计分析</a-button>
    </a-row>
    <a-input-search placeholder="搜索姓名" style="width: 200px" @search="onSearchName" />
    <table-detail :options="allOptions" @change="handleTable" />
    <feed-back :visible="feedVisible" :options="feedOptions" @change="handleDetail" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import tableDetail from "./common/table-detail";
import feedBack from "./common/feed-back";
export default {
  name: "ShebaoDetail",
  components: { tableDetail, feedBack },

  data() {
    return {
      tabs: {},
      defaultKey: "all",
      allOptions: {},
      finishedOptions: {},
      unFinishedOptions: {},
      errorOptions: {},
      feedVisible: false,
      feedOptions: {},
      params: {
        status: undefined,
        showItem: true,
        pageNo: 1,
        pageSize: 10,
        socDispatchId: ""
      }
    };
  },
  computed: {
    ...mapState(["hr"])
  },

  created() {
    this.params.socDispatchId = this.$route.query.socDispatchId;
    this.getDetail();
    this.getNavs();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: `/shebao/paidan`,
        query: { ...this.$route.query }
      });
    },
    getDetail() {
      this.$request({
        url: `/hr/api/v1/socDispatchEmpAdds`,
        params: { ...this.params }
      }).then(({ data }) => {
        this.allOptions = data;
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.socDispatchId}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    // 搜索姓名
    onSearchName(name) {
      name ? (this.params.name = name) : delete this.params.name;
      this.params.pageNo = 1;
      this.getDetail();
    },
    // 切换详情
    changeTab(i) {
      this.defaultKey = i;
      this.params.status = "";
      if (typeof i === "number") {
        this.params.status = i;
      }
      this.getDetail();
    },
    handleNav(e) {},
    handleTable(e) {
      this.feedVisible = e.visible;
      this.feedOptions = e.e;
      if (e.current) {
        this.params.pageNo = e.current;
        this.getDetail();
      }
    },
    handleDetail(e) {
      this.feedVisible = e.visible;
    }
  }
};
</script>
<style lang="scss" scoped>
.payslip-detail {
  padding: 24px;
  .top {
    position: relative;
    .pos {
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
}
.salary {
  cursor: pointer;
  margin: 24px 0;
  .item {
    padding: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
</style>
